<template>

  <div class="homeBox">
    <!--<p>我是重置支付密码</p>-->

    <div id="resetBankNumber">
      <div class="resetBankNumber_infor">
        <ul>
          <li><p>新密码</p>
            <p><input type="password" placeholder="请输入您的新密码" id="newPwd" v-model="newPwd"></p></li>
          <li><p>手机号</p>
            <p><input type="text" placeholder="请输入您的手机号码" id="phoneNum" v-model="phoneNum"></p></li>
          <li style="border-bottom: 0"><p>验证码</p>
            <p><input type="text"  placeholder="请输入验证码" id="resetBankNumber_yanzhengma" v-model="getyanzhengma"></p> <input type="button" id="btn" value="免费获取验证码" @click="getsetNumber()" v-show="show"/><span v-show="!show">{{count}}s后重新获取</span></li>
        </ul>
      </div>

      <div class="resetmimaBtn" id="confirmButton">
        <button @click="resetMessage()">确定</button>
      </div>

      <div class="code2007">
        <div class="code200702">
          <p></p>
          <ul>
            <li @click="endss()">确定</li>
          </ul>
        </div>
      </div>


      <div class="tishiAgree" v-show="tishikuang">
        <p>{{warnMessage}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'second',
    data() {
      return {
        resetpayTocken: '',
        newPwd:'',
        phoneNum:'',
        getyanzhengma:'',
        tishikuang:false,
        warnMessage:'',
        time:2000,
        timer:null,
        count:'',
        show:true
      }
    },
    created() {
      var that = this;
      that.resetpayTocken = sessionStorage.getItem('AuthToken');
    },
    methods: {
      getsetNumber() {
        const TIME_COUNT = 60;
        if (!this.timer) {
          var that = this
          if (that.phoneNum =='') {
            that.tishikuang = true;
            that.warnMessage = '手机号不能为空！';
            // this.tishikuang=false
            window.setTimeout(function () {
              that.tishikuang = false
            }, this.time);
          } else {
            axios.post('http://test.zjapi.xianxiangle.com/send_sms_code',{
              AuthToken:that.resetpayTocken,
              user_phone: that.phoneNum,
              action:'set_pay_psw'
            }).then(function (res) {
              console.log(res.data);
              console.log(res.data.message);
              that.tishikuang = true;
              that.warnMessage =res.data.message;
              // this.tishikuang=false
              window.setTimeout(function() {
                that.tishikuang = false
              }, that.time);
            }).catch(function () {

            })
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000)
          }
        }
      },

      resetMessage(){
        var that=this;
        if (that.phoneNum ==''||that.newPwd ==''||that.getyanzhengma =='') {
          that.tishikuang = true;
          that.warnMessage = '请填写完整信息！';
          // this.tishikuang=false
          window.setTimeout(function () {
            that.tishikuang = false
          }, this.time);
        }else {
          axios.post('http://test.zjapi.xianxiangle.com/set_pay_psw',{
            AuthToken:that.resetpayTocken,
            pay_passwd: that.newPwd,
            verify_code:that.getyanzhengma
          }).then(function (res) {
            console.log(res.data)
            if(res.data.code==0){
              // console.log(res.data.data.AuthToken);
              that.tishikuang = true;
              that.warnMessage =res.data.message;
              window.setTimeout(function() {
                that.tishikuang = false;
                that.$router.push({path:'/first'})
              }, that.time);
            }else{
              that.tishikuang = true;
              that.warnMessage =res.data.message;
              window.setTimeout(function() {
                that.tishikuang = false;
              }, that.time);
            }
          }).catch(function () {

          })
        }
      },


    },
//   components: {
//     AppHeader
//   }
  }
</script>

<style lang="scss" scoped>

  .homeBox {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    background-color: #eee;
  }
  .tishiAgree {
    width: 100%;
    /*display: none;*/
    margin: auto;
    p {
      width: 50%;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 0.3rem;
      color: white;
      padding: 0.5rem;
      text-align: center;
      height: 2rem;
      line-height: 2rem;
      font-size: 1.6rem;
      margin: auto;
    }
  }
  #resetBankNumber {
    width: 100%;
    margin: auto;
    .resetBankNumber_infor {
      width: 100%;
      margin: auto;
      background: white;
      //padding: 1rem 0 1rem 0;
      //margin-top: 1rem;
      ul {
        width: 100%;
        margin: auto;
        list-style: none;
        li {
          width: 90%;
          height: 3rem;
          line-height: 3rem;
          padding: 1rem 0 1rem 0rem;
          margin: auto;
          border-bottom: 1px solid #ccc;
          overflow: hidden;
          p {
            font-size: 1.4rem;
            font-family: PingFangSC-Medium;
            text-align: left;
          }
          p:nth-child(1) {
            width: 30%;
            height: 3rem;
            line-height: 3rem;
            text-align: left;
            float: left;
          }
          p:nth-child(2) {
            width: 50%;
            height: 3rem;
            line-height: 3rem;
            //border-right: 1px solid;
            float: left;

            input {
              width: 100%;
              /*padding-left: 5%;*/
              height: 3rem;
              line-height: 3rem;
              outline: none;
              border: 0;
              text-align: left;
              float: left;
              position: relative;
              right: 3rem;
              //font-size: 2rem;
            }
          }
          #btn {
            width: 10rem;
            background: white;
            border: 0;
            color: #32D69C;
            outline: none;
            font-size: 1.4rem;
            float: right;
            position: relative;
            bottom:2.3rem;
            right: 1rem;
          }
          span{
            border: 0;
            color: #32D69C;
            outline: none;
            font-size: 1.4rem;
            display: inline-block;
            float: right;
            position: relative;
            bottom:3rem;
            right: 1rem;
          }
        }
      }
    }
    .resetmimaBtn {
      width: 100%;
      margin-top: 7rem;
      text-align: center;
      button {
        width: 90%;
        height: 4rem;
        line-height: 4rem;
        background: #32D69C;
        text-align: center;
        color: white;
        border: 0;
        outline: none;
        border-radius: 2rem;
        font-size: 1.6rem;
      }
    }
  }

  .code2007 {
    width: 100%;
    //border: 1px solid;
    position: absolute;
    bottom: 24rem;
    margin: auto;
    display: none;
    .code200702 {
      width: 70%;
      height: 12rem;
      border: 1px solid #CCCCCC;
      border-radius: 1.6rem;
      background: #f3f3f3;
      position: relative;
      margin: auto;
      p {
        font-size: 2rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        margin-top: 1rem;
      }
      ul {
        list-style: none;
        li {
          text-align: center;
          border-top: 1px solid;
          font-size: 2rem;
          width: 100%;
          height: 5rem;
          line-height: 5rem;
          position: absolute;
          left: 0;
          bottom: 0;
        }
      }

    }
  }
</style>
